<template>
  <div class="particulars h-full overflow-auto">
    <el-container class="flex flex-col">
      <el-main v-if="playlists.creator">
        <div class="flex">
          <img :src="playlists.coverImgUrl" class="w-48 h-48 rounded-lg" />
          <div class="ml-3">
            <div class="flex justify-center items-center">
              <span
                class="border rounded border-red-500 w-10 h-5 text-red-500 px-1 text-xs"
                >歌单</span
              >
              <span class="text-2xl font-bold text-left ml-2 w-full">
                {{ playlists.name }}
              </span>
            </div>
            <div class="flex">
              <img
                :src="playlists.creator.avatarUrl"
                class="w-8 h-8 m-1 rounded-full cursor-pointer"
              />
              <router-link to="" class="mt-3 text-xs text-blue-700">
                {{ playlists.creator.nickname }}
              </router-link>
            </div>
            <div class="flex mt-2">
              <div
                @click="addall"
                class="play-all text-sm border border-red-500 rounded-full w-36 h-8 leading-8 bg-red-600 text-white flex justify-center items-center cursor-pointer"
              >
                <i class="el-icon-caret-right text-xl mr-2"></i>
                播放全部
                <i class="el-icon-plus text-xl ml-2"></i>
              </div>
              <div
                class="collect-all ml-3 text-sm border border-gray-300 rounded-full w-36 h-8 leading-8 flex justify-center items-center cursor-pointer"
              >
                <i class="el-icon-folder-add text-xl mr-2"></i>
                收藏({{ playlists.subscribedCount }})
              </div>
              <div
                class="collect-all ml-3 text-sm border border-gray-300 rounded-full w-28 h-8 leading-8 flex justify-center items-center cursor-pointer"
              >
                <i class="el-icon-share text-xl mr-2"></i>
                分享({{ playlists.shareCount }})
              </div>
              <div
                class="collect-all ml-3 text-sm border border-gray-300 rounded-full w-28 h-8 leading-8 flex justify-center items-center cursor-pointer"
              >
                <i class="el-icon-download text-xl mr-2"></i>
                下载全部
              </div>
            </div>
            <div class="flex mt-2 text-sm">
              <span class="text-gray-500">标签:</span>
              <a
                class="text-blue-700"
                v-for="(item, index) in playlists.tags"
                :key="index"
              >
                {{ item }}
                <span v-if="index !== playlists.tags.length - 1"> / </span>
              </a>
            </div>
            <div class="flex text-sm">
              <span class="text-gray-500"
                >歌曲:{{ playlists.commentCount }}</span
              >
              <span class="ml-3 text-gray-500"
                >播放:{{ Math.round(playlists.playCount / 10000) }}万</span
              >
            </div>
            <div class="flex">
              <span class="text-sm text-gray-500 synopsis text-left">
                简介:{{ playlists.description }}
              </span>
              <i class="el-icon-caret-bottom text-gray-400"></i>
            </div>
          </div>
        </div>
      </el-main>
      <el-main class="relative">
        <input
          class="search absolute top-10 right-10 text-xs pl-5 outline-none block"
          type="text"
          @keyup="filterBlogs"
          v-model="keyword"
          placeholder="请输入歌名"
        />
        <el-tabs value="first">
          <el-tab-pane label="歌曲列表" name="first">
            <table class="w-full text-left">
              <thead>
                <tr>
                  <td class="pl-24">音乐标题</td>
                  <td>歌手</td>
                  <td>专辑</td>
                  <td>时长</td>
                </tr>
              </thead>
              <tbody class="songs-tbody text-sm">
                <tr
                  v-for="(item, index) in songs"
                  :key="index"
                  @dblclick="addmusic(item)"
                >
                  <td class="text-sm w-2/5 truncate">
                    <span class="mr-3">{{
                      9 > index ? `0${index + 1}` : index + 1
                    }}</span>
                    <i class="iconfont text-xs mx-2 cursor-pointer">&#xe600;</i>
                    <i class="el-icon-download mx-3 text-sm cursor-pointer"></i>
                    <router-link to="">{{ item.name }}</router-link>
                    <span class="text-gray-500" v-if="item.alia[0]"
                      >({{ item.alia[0] }})</span
                    >
                  </td>
                  <td>
                    <router-link to="">{{ item.ar[0].name }}</router-link>
                  </td>
                  <td>
                    <router-link to="">{{ item.al.name }}</router-link>
                  </td>
                  <td>{{ item.dt | timeTrans }}</td>
                </tr>
              </tbody>
            </table>
          </el-tab-pane>
          <el-tab-pane :label="`评论(${remark.total})`" name="second">
            <discuss></discuss>
          </el-tab-pane>
          <el-tab-pane label="收藏者" name="third">
            <div
              v-if="subscribers"
              class="grid grid-cols-4 grid-rows-8 gap-4 px-10 mt-10"
            >
              <dl
                v-for="(item, index) in subscribers"
                :key="index"
                class="flex items-center text-xs"
              >
                <dt>
                  <img
                    :src="item.avatarUrl"
                    class="useheadimg w-24 h-24 rounded-full border"
                  />
                </dt>
                <div class="flex flex-col text-left ml-2 w-2/3 truncate">
                  <dd>{{ item.nickname }}</dd>
                  <dd v-if="item.signature">{{ item.signature }}</dd>
                </div>
              </dl>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import discuss from "@/components/discuss.vue";
export default {
  //
  data() {
    return {
      playlists: [],
      songs: [],
      subscribers: [],
      paging: 1,
      remark: {},
      hotCommentshow: 10,
      keyword: "",
    };
  },
  components: {
    discuss,
  },
  methods: {
    getparticulars() {
      return this.axios({
        method: "get",
        url: "https://music.hzbiz.net/playlist/detail",
        params: {
          id: this.$route.params.id,
        },
      })
        .then((result) => {
          this.playlists = result.data.playlist;
          let ids = [];
          this.playlists.trackIds.forEach((item) => {
            ids.push(item.id);
          });
          this.axios({
            method: "get",
            url: "https://music.hzbiz.net/song/detail",
            params: {
              ids: ids.join(","),
            },
          })
            .then((result) => {
              this.songs = result.data.songs;
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getsubscribers() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/playlist/subscribers",
        params: {
          id: this.$route.params.id,
          limit: 30,
        },
      })
        .then((result) => {
          this.subscribers = result.data.subscribers;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getremark() {
      return this.axios({
        method: "get",
        url: "https://music.hzbiz.net/comment/playlist",
        params: {
          id: this.$route.params.id,
          limit: 20,
          offset: (this.paging - 1) * 20,
        },
      })
        .then((result) => {
          this.remark = result.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addmusic(obj) {
      this.$store.commit("addMusic", obj);
    },
    filterBlogs() {
      console.log(this.songs);
      if (this.keyword === "") {
        this.getparticulars();
      } else {
        this.songs = this.songs.filter((blog) => {
          let arr = blog.name.match(this.keyword);

          return arr;
        });
      }
    },
    addall() {
      this.songs.forEach((item) => {
        this.$store.commit("addMusic", item);
      });
    },
  },
  created() {
    this.getparticulars();
    this.getremark();
    this.getsubscribers();
    this.$store.commit("changenowlis", this.$route.params.id);
  },
  filters: {
    timeTrans(val) {
      var date = new Date(val);
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return `${m}${s}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.particulars {
  width: 100%;
  height: 82.5vh;
  .search {
    width: 200px;
    height: 30px;
    background: #f7f7f7;
    border-radius: 30px;
  }

  .songs-tbody {
    tr {
      height: 30px;
      line-height: 30px;
      &:nth-child(even) {
        background: #ffffff;
      }
      &:nth-child(odd) {
        background: #f9f9f9;
      }
      &:hover {
        background: #f0f1f2;
      }
    }
    td {
      padding-right: 30px;
    }
  }
  .useheadimg {
    width: 92px;
    height: 92px;
  }
  .Comments {
    border-bottom: 1px solid #ccc;
  }
}
.play-all {
  background: #ec4141;
  &:hover {
    background: #d73535;
  }
}
.collect-all:hover {
  background: #f2f2f2;
}
.synopsis {
  width: 1436px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style lang="scss" >
.el-tabs__nav {
  .el-tabs__active-bar.is-top {
    background: #c62f2f;
  }
  .el-tabs__item {
    color: #000;
  }
}
.el-tabs__nav-wrap::after {
  width: 0;
}
</style>